<template>
  <div class="problem-set">
    <el-card>
      <el-tag>公有题库</el-tag>
      <el-table :data.sync="problemData" style="width: 100%" :stripe="true">
        <el-table-column prop="id" label="#" width="80"> </el-table-column>
        <el-table-column prop="title" label="题目" width="300">
          <template slot-scope="scope">
            <el-link type="primary" @click="onProblemClick(scope.row)">
              {{ scope.row.title }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度"> </el-table-column>
      </el-table>
      <el-pagination
        layout="->,sizes,prev, pager, next,jumper"
        :page-sizes="[5, 10, 20]"
        :current-page="this.pagination.pageNum"
        :page-size="this.pagination.pageSize"
        :page-count="this.pagination.pageCount"
        :pager-count="5"
        @size-change="onPageSizeChange"
        @current-change="onPageNumChange"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ProblemSet",
  components: {},
  mounted: function() {
    this.getProblemData();
  },
  methods: {
    onProblemClick(row) {
      this.$router.push("/problem/" + row._id);
    },
    getProblemData() {
      axios
        .get("/api/problem/public", {
          params: {
            pageNum: this.pagination.pageNum,
            pageSize: this.pagination.pageSize,
          },
        })
        .then((response) => {
          console.log(response);
          if (response.data.status == 1) {
            this.pagination.pageCount = response.data.result.totalPageNum;
            this.problemData = response.data.result.problemSet;
            if (this.problemData.length) {
              this.problemData.forEach((problem, index) => {
                problem["id"] =
                  index +
                  1 +
                  (this.pagination.pageNum - 1) * this.pagination.pageSize;
              });
            }
            this.$message.success("获取公有题目成功");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取公有题目失败");
        });
    },
    onPageSizeChange(pageSizeVal) {
      this.pagination.pageSize = pageSizeVal;
      this.getProblemData();
    },
    onPageNumChange(pageNumVal) {
      this.pagination.pageNum = pageNumVal;
      this.getProblemData();
    },
  },
  data() {
    return {
      pagination: {
        pageNum: 1,
        pageSize: 5,
        pageCount: 1,
      },
      problemData: [],
      // problemData: [
      //   {
      //     _id: "1",
      //     title: "test1",
      //     difficulty: 1,
      //     content: "111111",
      //     status: 1,
      //   },
      //   {
      //     _id: "2",
      //     title: "test2",
      //     difficulty: 2,
      //     content: "222222",
      //     status: 1,
      //   },
      //   {
      //     _id: "3",
      //     title: "test3",
      //     difficulty: 3,
      //     content: "333333",
      //     status: 1,
      //   },
      // ],
    };
  },
};
</script>

<style scoped></style>
